<template>
  <div class="head">
    <div class="cover">
      <img :preview="false" :src="info.coverImgUrl+'?param=500y500'" style="width: 100%">
    </div>
    <div class="content">
      <div class="info">
        <span class="h1" style="margin-bottom: 0px">{{ info.name }}</span>
      </div>
      <div class="creator">
        <img :src="info.creator.avatarUrl+'?param=100y100'" style="margin-right: 10px;width: 36px;border-radius: 50%">
        <div style="display: flex;flex-direction: column">
          <span>{{ info.creator.avatarImgId }}</span>
          <div>
            <span style="color: #929292;">{{ type===1?'发行于':'更新于' }}{{ DateFormat(info.trackUpdateTime) }} • {{ info.playCount }}首歌</span>
            <div v-if="type===2" class="tags">
              <span v-for="item of info.tags" :key="item" style="margin-right: 10px">#{{ item }}</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <span id="description" class="description" :title="info.description">{{ info.description }}
        </span>
      </div>
      <div class="handle">
        <button class="bt-play discolour" @click="playAll">
        <!-- <svg-icon name="play-fill" />  -->
        播放</button>
        <button class="discolour">
          <!-- <svg-icon name="love" /> -->
          </button>
        <button class="discolour">•••</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useStore } from '@/store'

const props = withDefaults(
  defineProps<{
    info?: any
    type?: number
  }>(), {
    info:{
      name: '',
      image: '',
      description: '',
      creatorName: '',
      creatorImg: '',
      time: '',
      company: '',
      length: '',
      artists: ''
    }
}
)
const store = useStore()


// const info =
// {
//       name: '',
//       image: '',
//       description: '',
//       creatorName: '',
//       creatorImg: '',
//       time: '',
//       company: '',
//       length: '',
//       artists: ''
//     }


const info = store.state.songListInfo.playlist

    const DateFormat = (date:string) => {
      const time = new Date(date)
      const y = time.getFullYear()
      const m = time.getMonth() + 1
      const d = time.getDate()
      return y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
    }

    const playAll = () => {
      // ctx.emit('playAll')
      console.log(555);
// console.log(store.state.songListInfo.playlist, 9999999999);
    }

</script>

<style scoped lang="less">
.head{
  margin: 30px  500px;
  display: flex;
  flex-direction: row;
  margin-bottom: 80px;
  justify-content: space-between;
}
.cover{
  height: 250px;
  width: 260px;
  border-radius: 15px;
  overflow: hidden;
}
.content{
  width: calc(100% - 350px);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.creator{
  display: flex;
  align-items: center;
}
.tags{
  display: inline-block;
  margin-left: 20px;
  color: #929292;
}
.description{
  width: 100%;
  font-size: 13px;
  color: #929292;
  padding-right: 40px;
  user-select: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
button{
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  color: #FFFFFF;
  margin-right: 20px;
  outline: none;
  font-weight: bolder;
  color: #1a1a1a;
}
.bt-play{
  width: 100px;
  font-size: 18px;
}
</style>
